<template>
    <div class="question mt-2">
        <div class="title flex justify-between">
            <div class="flex-1 flex">
                <span>{{ props.i + 1 }}、</span>
                <div class="flex-1">
                    <div class="question-name">
                        <span v-if="question.categoryName" class="font-bold">（{{ question.categoryName }}）</span><span
                            v-html="getInlineStrHtml(question.content)"></span>
                    </div>
                    <template v-if="question.choiceDtos && question.choiceDtos.length > 0">
                        <!-- 选项 -->
                        <div v-if="question.questionsType == 2" class="chooice my-3 flex">
                            <div class="item" v-for="item in question.choiceDtos" :key="item.item">
                                <span v-html="item.item"></span>、
                                <span v-html="getInlineStrHtml(item.itemContent)"></span>
                            </div>
                        </div>
                        <!-- 计算题每项 -->
                        <div v-if="question.questionsType == 3" class="calc-opt my-3 flex items-center">
                            <div class="item" v-for="(item, index) in question.choiceDtos" :key="index">
                                <span>({{ index + 1 }})</span>、
                                <span v-html="getInlineStrHtml(item.itemContent)"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 试题图片 -->
            <div v-if="question.imgs && question.imgs.length > 0" class="question-imgs">
                <img v-for="imgUrl in question.imgs" :src="imgUrl" class="image">
            </div>
            <div v-if="question.videoQrCode" class="flex items-center flex-col vedio">
                <div>
                    <img :src="question.videoQrCode" class="image">
                </div>
                <div class="f-12">视频讲解</div>
            </div>
        </div>
        <!-- 手写答案空白区域 -->
        <div v-if="question.questionsType == 4" class="answer-user-4"></div>
        <div v-else-if="question.questionsType == 3" class="answer-user-3"></div>
        <!-- 答案 -->
        <div v-if="props.showAnswer" class="answer">
            答案：<span v-html="getInlineStrHtml(answers.length === 0 ? '无' : answers.join(''))"></span>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { QuestionItem } from '@/Utils/type';
import { computed } from 'vue';
import { getInlineStrHtml } from '@/Utils/utils';

const props = defineProps<{
    question: QuestionItem;
    i: number;
    showAnswer?: boolean;
}>();

const question = computed(() => props.question);

const answers = computed(() => (props.question.answers || []).reduce((answers: string[], answer) => {
    if (!!answer) {
        answers.push(getInlineStrHtml(answer));
    }
    return answers;
}, []));
</script>

<style lang="scss" scoped>
.question {
    .question-name {
        .image {
            max-width: 200px;
            margin-left: 20px;
        }
    }

    .question-imgs {
        .image {
            width: 150px;
        }
    }

    .vedio {
        .image {
            height: 150px;
        }
    }

    .answer-user-3 {
        height: 40px;
    }

    .answer-user-4 {
        height: 120px;
    }

    .chooice {
        .item {
            &:not(:first-child) {
                margin-left: 25px;
            }

            margin-top: 4px;
        }
    }

    font-size: 35px;
}
</style>